<template>
    <!-- 往来单位列表 -->
    <div class="e-table billList">
        <div class="top">
            <div class="left" style="margin-left: 10px">
                <div>
                    <el-button
                        size="mini"
                        @click="buttonAdd()"
                        style="background: #7aa818; color: #fff"
                        >新增</el-button
                    >
                </div>
            </div>
            <div class="right">
                <div>
                    <el-input
                        placeholder=""
                        v-model="advancedQuery.keyword"
                        @keyup.enter.native="getData"
                    >
                        <i
                            slot="suffix"
                            class="el-icon-search"
                            style="cursor: pointer"
                            @click="getData"
                        ></i>
                    </el-input>
                </div>
                <div>
                    <el-button
                        style="
                            background: #2e61d7;
                            color: #fff;
                            margin-left: 5px;
                        "
                        @click="onAdvanceSearch"
                        >高级搜索</el-button
                    >
                </div>
            </div>
        </div>

        <el-table
            border
            ref="table"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            highlight-current-row
            height="0"
            class="table"
            :max-height="$store.state.tableHeight"
            @selection-change="handleSelectionChange"
            v-sortTable="{ tableData: tableData, _this: this, ref: 'table' }"
        >
            <el-table-column type="selection" width="50" v-if="isBatch" fixed>
            </el-table-column>
            <el-table-column
                label="单位名称"
                min-width="250"
                fixed="left"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <span
                        @click="Examine(scope.row)"
                        style="color: blue; cursor: pointer"
                    >
                        {{ scope.row.businessUnitName }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                prop="creditCode"
                label="身份证号/统一社会信用代码"
                min-width="150"
                fixed="left"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="businessUnitTypeKey"
                label="单位类型"
                width="80"
            >
            </el-table-column>
            <el-table-column
                prop="orgName"
                label="录入单位"
                min-width="250"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="contactName"
                label="联系人"
                width="80"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="contactTel"
                label="联系电话"
                width="180"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="state"
                label="是否启用"
                width="100"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    {{ scope.row.state == '1' ? '启用' : '禁用' }}
                </template>
            </el-table-column>
            <el-table-column
                prop="isCite"
                label="是否引用"
                width="100"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    {{ scope.row.isCite == '1' ? '引用' : '未引用' }}
                </template>
            </el-table-column>
        </el-table>

        <ComPagination
            :total="totalCount"
            :pageSize.sync="advancedQuery.limit"
            :currentPage.sync="advancedQuery.page"
            @currentChange="currentChange"
            @sizeChange="sizeChange"
        />
    </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination.vue'
import Withtheunit from '@/api/OutsourcingartyAdmin/Withtheunit/Withtheunit.js'
import { advanceSearch } from '@/utils/common.js'
import { mapMutations } from 'vuex'

//审核
export default {
    components: {
        ComPagination
    },
    data () {
        return {
            isBatch: false, //是否进入批量操作
            batch: '进入批量管理',
            dialogVisibleSearch: false,
            searchIpt: '',
            input1: '',
            value1: '',
            value2: '',
            multipleSelection: [],
            tableData: [
                {
                    businessUnitName: '', //单位名称
                    businessUnitTypeKey: '', //单位类型
                    creditCode: '', //身份证号/统一社会信用代码
                    manageOrgName: '', //管理单位
                    contactName: '', //联系人
                    contactTel: '', //联系电话
                    isStart: '' //是否启用
                }
            ],
            advancedQuery: {
                businessType: [], //业务类型
                businessUnitName: '', //往来单位名称
                businessUnitNo: '', //往来单位编号
                creditCode: '', //统一社会信用代码
                flatType: [], //单位类型
                keyword: '', //模糊查询关键字
                limit: 20, //每页显示条数
                orgId: '', //单据机构
                page: 1, //当前页数
                states: [] //单据状态
            },
            totalCount: 0 //总页数
        }
    },
    created () {
        this.getData()
    },
    computed: {
        // 判断状态
        statusLable () {
            return param => {
                const state = this.$store.state.equip.equipData.state
                const obj = state.find(x => x.value == param)
                if (obj !== undefined) {
                    return obj.label
                }
            }
        }
    },
    methods: {
        ...mapMutations(['setSelectedInfo']),
        handleSelectionChange (val) {
            this.multipleSelection = val
        },
        //查询分包商列表数据
        async getData () {
            let { list, totalCount } = await Withtheunit.WiththeunitList(
                this.advancedQuery
            )
            this.tableData = list
            this.totalCount = totalCount
        },
        //新增按钮
        buttonAdd () {
            this.$router.push('/WiththeunitAdd')
        },
        //点击表格查看
        Examine (row) {
            //点击进入查看页面
            const billid = row.id
            if (row.state === -1 || row.state === 2 || row.state === 5) {
                this.$router.push({
                    path: '/WiththeunitExamine',
                    query: { billid }
                })
            } else {
                this.$router.push({
                    path: '/WiththeunitEdit',
                    query: { billid }
                })
            }
        },
        // async Examine (row) {
        //     //点击进入查看页面
        //     const billid = row.id
        //     this.$router.push({
        //         path: '/WiththeunitEdit',
        //         query: { billid }
        //     })
        // },
        // //点击表格查看
        // tableDbEdit (billid) {
        //     this.$router.push({
        //         path: '/WiththeunitEdit',
        //         query: { billid }
        //     })
        // },
        //翻页
        currentChange () {
            this.getData()
        },
        //改变条数
        sizeChange () {
            this.getData()
        },

        //高级查询
        onAdvanceSearch () {
            advanceSearch('/WiththeunitSearch').then(res => {
                this.advancedQuery.businessType = res.subcontractorTypeValue //业务类型
                this.advancedQuery.businessUnitName = res.isAbroadUnit //往来单位名称
                this.advancedQuery.businessUnitNo = res.creditLevelTypeKey //往来单位编号
                this.advancedQuery.creditCode = res.stateTypeKey //统一社会信用代码
                this.advancedQuery.flatType = res.startCapital //单位类型
                this.advancedQuery.states = res.endCapital //单据状态
                this.advancedQuery.orgId = res.grade //单据机构
                this.getData()
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.like {
    color: rgb(46, 97, 215);
    font-size: 17px;
    line-height: 30px;
    cursor: pointer;
}
::v-deep.el-table .cell {
    text-align: center;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 10px; // 纵向滚动条
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 5px;
}
</style>
